<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <div class="flex w-1/3 p-6 shadow-lg rounded-lg flex-col bg-white">
      <re-input title="姓名" titleWidth="6">
        <el-input placeholder="请输入内容" v-model="staffInfo.name" />
      </re-input>
      <re-input title="角色" titleWidth="6" style="margin-top: 1.5rem">
        <el-select
          v-model="staffInfo.role"
          placeholder="请选择"
          :loading="loading"
          loading-text="加载数据中"
          style="width: 100%"
        >
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.key"
          >
          </el-option>
        </el-select>
      </re-input>
      <re-input title="学号" titleWidth="6" style="margin-top: 1.5rem">
        <el-input placeholder="请输入内容" v-model="staffInfo.staffNumber" />
      </re-input>
      <re-input title="用户名" titleWidth="6" style="margin-top: 1.5rem">
        <el-input
          placeholder="请输入内容"
          v-model="staffInfo.userName"
        ></el-input>
      </re-input>
      <re-input title="密码" titleWidth="6" style="margin-top: 1.5rem">
        <el-input
          placeholder="请输入内容"
          v-model="staffInfo.userPassword"
          show-password
        >
        </el-input>
      </re-input>

      <el-button
        style="margin-top: 1.5rem"
        type="primary"
        icon="el-icon-upload"
        @click="clickSumbit(staffInfo)"
        >提交
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import ReInput from "/@/components/ReInput/index.vue";
import { onMounted, reactive, ref } from "vue";
import { getRoleList, RoleUpdateDTO } from "/@/api/role";
import { StaffInsertDTO, addStaff } from "/@/api/staff";
import { errorMessage, successMessage } from "/@/utils/message";

export default {
  components: {
    ReInput
  },
  setup() {
    const staffInfo = reactive<StaffInsertDTO>({
      userName: "",
      userPassword: "123456",
      staffNumber: "",
      name: "",
      role: ""
    });
    const clickSumbit = async (staffInfo: StaffInsertDTO): Promise<void> => {
      const res = await addStaff(staffInfo);
      if (res.code === 1) {
        successMessage(res.message);
        staffInfo.name = "";
        staffInfo.role = "";
        staffInfo.staffNumber = "";
        staffInfo.userName = "";
        staffInfo.userPassword = "123456";
      } else {
        errorMessage(res.message);
      }
    };

    const roleList = ref<RoleUpdateDTO[]>([]);
    const loading = ref<boolean>(true);
    onMounted(async () => {
      const data = await getRoleList();
      roleList.value = data.response;
      loading.value = false;
    });
    return {
      staffInfo,
      roleList,
      loading,
      clickSumbit
    };
  }
};
</script>

<style scoped></style>
